<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ include file="head.jsp"%>
<div id="main" class="content">
	<div class="container">
		<article id="post-1202"
			class="js-gallery post-1202 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized tag-11 tag-22 tag-29">
			<style>
.container {
	padding: 10px 0px;
}

.post {
	margin: 0 auto
}

#content img {
	width: 100%;
}
</style>
			<section class="post_content">
				<header class="post_header">
					<h1 class="post_title">${blog.title }</h1>
				</header>
				<div id="content" class="post-body js-gallery">${blog.content }</div>
				<div class="meta split split--responsive cf">
					<div class="split__title">
						<time datetime="2017-10-02 01:44">${blog.createtime }</time>
						<span class=""><a rel="tag">${blog.label }</a> </span>
					</div>
					<div id="social-share">
						<span class="entypo-share"><i class="iconfont"></i>分享</span>
					</div>
					<div class="slide">
						<a class="btn-slide" title="switch down"><i class="iconfont"></i>折叠评论区</a>
					</div>
				</div>
			</section>
		</article>
	</div>
	<svg id="upTriangleColor" width="100%" height="40"
		viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
	<div id="social">
		<ul>
			<li><a href="" title="qzone" target="_blank"><i
					class="iconfont"></i></a></li>
			<li><a href="" title="weibo" target="_blank"><i
					class="iconfont"></i></a></li>
			<li><a href="" title="douban" target="_blank"><i
					class="iconfont"></i></a></li>
			<li><a href="" title="twitter" target="_blank"><i
					class="iconfont"></i></a></li>
		</ul>
	</div>
	<div id="panel">
		<div class="comment-area">
			<section class="comments">
				<div class="comments-main">
					<div id="comments-list-title">
						<span>${commentNum }</span> 条评论
					</div>
					<div id="loading-comments">
						<div class="host">
							<div class="loading loading-0"></div>
							<div class="loading loading-1"></div>
							<div class="loading loading-2"></div>
						</div>
					</div>
					<ul id="commnetlist" class="commentwrap">

						<c:forEach items="${comments.list }" var="c">
							<li class="comment even thread-even depth-1" id="li-comment-">
								<div id="comment" class="comment_body contents">
									<div class="profile">
										<a href=""><img class="gravatar" alt="${c.nickname }"
											original="statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg"></a>
									</div>
									<div class="main shadow">
										<div class="commentinfo">
											<section class="commeta">
												<div class="shang">
													<h4 class="author">
														<a  target="_blank"><img
															src="statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg"
															class="gravatarsmall" alt="${c.nickname }">${c.nickname }   <c:if test="${c.pid != ''}"> 回复：${c.pnickname} </c:if> </a>
													</h4>
												</div>
											</section>
										</div>
										<div class="body">
											<p>${c.content } </p>
										</div>
										<div class="xia info">
											<span><time datetime="${c.createtime }">${c.createtime }</time></span> 
											<span>
												<a rel="nofollow" 
												data-id="${c.id}" 
												data-nickname="${c.nickname }"
												data-content="${c.content }"
												 class="comment-reply-link" aria-label="回复${c.nickname }">回复</a>
											</span>
										</div>
									</div>
								</div>
							</li>
						</c:forEach>
						<!-- #comment-## -->
					</ul>
					<nav id="comments-navi">
						<a class="prev page-numbers" href=""> &lt;</a> <a
							class="page-numbers" href="">1</a> <a class="page-numbers"
							href="">2</a> <a class="page-numbers" href="">3</a> <span
							aria-current="page" class="page-numbers current">4</span>
					</nav>
					<div id="respond" class="comment-respond">
						<h6 id="replytitle" class="comment-reply-title">
							<a rel="nofollow" id="cancel-comment-reply-link" href=""
								style="display: none;">取消</a>
						</h6>
						<span id="pnickname_span"></span>
						<form action="#" method="post" id="commentform" class="clearfix">
							<div class="clearfix"></div>
							<div class="author-info">
								<!-- 评论人昵称 -->
								<input name="author" id="author" placeholder="昵  称 : " value=""
									tabindex="1" title="Name (required)" type="text">

								<!-- 邮箱 -->
								<input name="email" id="email" placeholder="邮  箱 : " value=""
									tabindex="2" title="E-mail(will not be published) required"
									type="text">

								<!-- 网址 -->
								<input name="url" id="url" placeholder="网  址 : " value=""
									tabindex="3" title="Website" type="text">
							</div>
							<div class="clearfix"></div>
							<!-- 被回复评论id -->
							<input name="comment_post_ID" id="comment_post_ID" type="hidden">
							<!-- 被回复人昵称 -->
							<input name="pnickname" id="pnickname" value="" type="hidden">

							<!-- 被回复的内容 -->
							<input name="pcontent" id="pcontent" value="" type="hidden">

							<p style="display: none;">
								<input id="akismet_comment_nonce" name="akismet_comment_nonce"
									value="632104fca1" type="hidden">
							</p>
							<p style="display: none;">
								<input id="ak_js" name="ak_js" value="87" type="hidden">
							</p>
							<div class="comment-form-info">
								<div class="real-time-gravatar">
									<img id="real-time-gravatar"
										src="statics/images/d41d8cd98f00b204e9800998ecf8427e.png"
										alt="gravatar头像">
								</div>
								<p class="input-row">
									<i class="row-icon"></i>
									<!-- 评论内容 -->
									<textarea class="text_area" rows="3" cols="80"
										name="sendcontent" id="sendcontent" tabindex="4"
										placeholder="你不说两句吗？(°∀°)ﾉ……"></textarea>

									<!-- 提交按钮 -->
									<input name="submit" class="button" id="submit" tabindex="5"
										value="发送" type="submit">
								</p>
							</div>
						</form>
					</div>
				</div>
			</section>
		</div>
	</div>
	<svg id="dwTriangleColor" width="100%" height="40"
		viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
	<div class="wrapper"></div>
</div>


<%@ include file="footer.jsp"%>



<script>
var addurl = "${baseurl}/comments/add";
	$(function(){
		//发布评论
		$("#submit").click(function(){
			var id  = ${blog.id}
			//发送的数据
			var sendData = {
				bid : id,
				nickname  : $.trim($("#author").val()),
				email     : $.trim($("#email").val()),
				url       : $.trim($("#url").val()),
				content   : $.trim($("#sendcontent").val()),
				pid       : $("#comment_post_ID").val(),
				pnickname : $("#pnickname").val(),
				pcontent  : $("#pcontent").val(), 
				headportrait : '',
			}
			
			//console.log(sendData);
			
			if(sendData.nickname == '') {
				alert("昵称不能为空");
				return false;
			}
			
			if(sendData.content == '') {
				alert('评论内容不能为空');
				return false;
			}
			
			$.post(addurl , sendData , function(data , s , x){
				if(data.code != 1) {
					alert(data.msg);
				} else {
					//清空表单数据
					$("#author").val('');
					$("#email").val('');
					$("#url").val('');
					$("#sendcontent").val('');
					$("#comment_post_ID").val('');
					$("#pnickname").val('');
					$("#pcontent").val(''); 
					
					console.log(data.data.comments);
					var comments = data.data.comments;
					//字符串拼接
					var str = '<li class="comment even thread-even depth-1" id="li-comment-"><div id="" class="comment_body contents">';
					str += '<div class="profile"><a href=""><img class="gravatar" alt="' + comments.nickname + '"';
					str += ' original="statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg"></a></div>';
					str += '<div class="main shadow"><div class="commentinfo"><section class="commeta"><div class="shang"><h4 class="author">';
					str += '<a target="_blank"><img src="statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg ';
					
					//判断是否有回复
					if(comments.pid != '') {
						str += ' class="gravatarsmall" alt="' + comments.nickname + '">' + comments.nickname + ' 回复：' + comments.pnickname + '</a>';
					} else {
						str += ' class="gravatarsmall" alt="' + comments.nickname + '">' + comments.nickname + '</a>';
					}
					
					str += '</h4></div></section></div><div class="body">';
					str += '<p>' + comments.content + '</p></div><div class="xia info">';
					str += '<span><time datetime="' + comments.createtime + '">' + comments.createtime + '</time></span> <span><a rel="nofollow" class="comment-reply-link" ';
					str += 'data-id="' + comments.id + '"'; 
					str += 'data-nickname="' + comments.nickname + '"'; 
					str += 'data-content="' + comments.content + '"'; 
					str += 'aria-label="回复' + comments.nickname + '">回复</a></span></div></div></div></li>';
					
					$("#commnetlist").prepend(str);
					
				}
			}) 
			
			return false;
		})
		
		
		//回复
		$("#commnetlist").on('click' , ".comment-reply-link" , {} , function(e){
			var id = $(this).data("id"); 
			var nickname = $(this).data('nickname');
			var content = $(this).data('content');
			
			$("#comment_post_ID").val(id)
			$("#pnickname").val(nickname)
			$("#pcontent").val(content)
			
			$("#pnickname_span").text(nickname);
			
			//阻止事件冒泡
			e.stopPropagation();
		
		}) 
		
		//点击空白回复人昵称消失
		$("body").click(function(e){
			$("#pnickname_span").text("");
			$("#comment_post_ID").val("")
			$("#pnickname").val("")
			$("#pcontent").val("")
		})
	})
</script>